import * as React from 'react';
import ReactDOM from 'react-dom'
// const { useState } = React;
let state: any = [];
let setters: any = [];
let stateIndex = 0;

function createSetter (index) {
  return function (newState) {
    state[index] = newState;
    render()
  }
}

function useState (initialState) {
  console.log(initialState)
  state[stateIndex] = state[stateIndex] ? state[stateIndex] : initialState
  setters.push(createSetter(stateIndex))
  let value = state[stateIndex]
  let setter = setters[stateIndex]
  stateIndex++
  return [value, setter]
}

function render () {
  stateIndex = 0
  ReactDOM.render(
    <Home/>,
    document.getElementById('root')
  )
}

const Home: React.FC = () => {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('张三')
  return (
    <div>
      {count}
      <button onClick={() => setCount(count + 1)}>点击 + 1</button>
      <button onClick={() => setCount(count - 1)}>点击 - 1</button>
      {name}
      <button onClick={() => setName('李四')}> 李四</button>
    </div>
  )
}

export default Home;